import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Typography } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const PageHeader = () => {
  const navigate = useNavigate();

  return (
    <div className="network-home-content">
      <div className="page-header-container">
        <div className="page-header-info">
          <Title level={2}>局域网管理</Title>
          <Text className="subtitle">创建和管理您的局域网，探索公共资源</Text>
        </div>
        <Button 
          type="primary" 
          size="large"
          icon={<PlusOutlined />}
          onClick={() => navigate('/network/create')}
          className="create-network-btn"
        >
          创建新局域网
        </Button>
      </div>
    </div>
  );
};

export default PageHeader;